<template>
	<view class="hui">
		<view class="head">
			<u-navbar :autoBack="true" :safeAreaInsetTop="true" :placeholder="true" bgColor="transparent">
				<view class="u-nav-slot b_flex_c" slot="center">
					<view class="city">分货操作</view>
				</view>
			</u-navbar>
		</view>
		<view class="box">
			<view class="list_info">
				<view class="flex">
					<image @click="toImg()" class="l_img" :src="info.goods_img"></image>
					<view>
						<view class="name">
							{{info.goods_name}}
						</view>
						<view class="flex sku">
							<view>毛重约{{info.mz}}斤</view>
							<view class="xian"></view>
							<view>净重约{{info.jz}}斤</view>
						</view>
					</view>
					<view class="status">{{info.statusText}}</view>
				</view>
				<view class="num_box">
					<view class="flexc mt">
						<view> 应收(件):</view>
						<view class="num">{{info.y_num}}</view>
					</view>
					<view class="flexc mt">
						<view> 已收(件):</view>
						<view class="num">{{info.fj_num}}</view>
					</view>
					<view class="flexc mt">
						<view> 已分(件):</view>
						<view class="num">{{info.fj_num}}</view>
					</view>
				</view>
			</view>

			<view class="record_box">
				<view>分拣数量</view>
				<view class="blue" @click="toRecord()">已分拣{{num}}次</view>
			</view>

            <view class="pl" v-if="pl" @click="setPl()">批量</view>

			<view class="user_box">
				<view @click="fj(item)" :class="['user_info',index<1?'':'mtop','u_info_color']"
					v-for="(item,index) in list" :key="index">
					<view class="flexc">
						<view class="key mr">{{index+1}}</view>
						<view class="">{{item.user.nickname}}</view>
						<view>【{{item.user.shop_name}}】</view>
					</view>
					<view class="flexcs">

						<view class="u_num_box">
							<view>应分(件)</view>
							<view class="fw">{{item.y_num}}</view>
						</view>

						<view class="u_num_box">
							<view>已分(件)</view>
							<view class="fw">{{item.fj_num}}</view>
						</view class="u_num_box">

						<view class="u_num_box">
							<view>剩余(件)</view>
							<view class="fw">{{item.w_num}}</view>
						</view>


					</view>
				</view>


			</view>


			<u-popup :show="show" mode="center" width="80%" @close="show=false">

				<view v-for="(item,index) in itemList" :key="index">
					<view class="user_info">
						<view class="flexc">

							<view class="">{{item.user.nickname}}</view>
							<view>【{{item.user.shop_name}}】</view>
						</view>
						<view class="flexcs">

							<view class="u_num_box">
								<view>应分(件)</view>
								<view class="fw">{{item.y_num}}</view>
							</view>

							<view class="u_num_box">
								<view>已分(件)</view>
								<view class="fw">{{item.fj_num}}</view>
							</view class="u_num_box">

							<view class="u_num_box">
								<view>剩余(件)</view>
								<view class="fw">{{item.w_nums}}</view>
							</view>
						</view>
					</view>
					<view class="nums_box flexcc">
						<view>分货数量: </view>
						<u-number-box :max="item.w_nums" :min="1" v-model="item.w_num"></u-number-box>
					</view>
				</view>
				<view class="flexc btn_box">
					<view class="f_btn" @click="make()">确定</view>
					<view class="f_btn" @click="show=false">取消</view>
				</view>

			</u-popup>
		</view>
	</view>
</template>

<script>
	import {fhInfo,fhSubmit} from "@/require/api.js";
	export default {
		data() {
			return {
				params: {
					ids: '',
					name: '',
					token: ''
				},
				info: {},
				list: [],
				show: false,
				itemList: [],
				num: 0,
				pl:false
			}
		},
		onLoad(e) {
			if (e.name) {
				this.params.name = e.name;
			}
			if (e.ids) {
				this.params.ids = e.ids;
			}
			this.getInfo();
		},
		methods: {
			toRecord(){
				
				if(this.num<1) return this.$Toast('暂无记录');
				
				uni.navigateTo({
					url:'/pages/fh/record?ids='+this.params.ids
				})
			},
		  	async submit(){
				
				let parm={list:this.itemList};
				
				let {code,msg,data}=await fhSubmit(parm);
				if(code==1){
					this.getInfo();
					this.show=false;
				}
				this.$project.toast(msg);
			},
			make(){
				
				let _=this;
				uni.showModal({
					title: '温馨提示',
					content: '是否确认分货?',
					confirmColor: '#009943',
					success(res) {
						if (res.confirm) {
							_.submit();
						} 
					}
				})
			},
			setPl(){
				this.itemList=[];
				this.list.forEach(res=>{
					
					if(res.w_num>0){
						
						
						let item=JSON.parse(JSON.stringify(res));
						
						item.w_nums=item.w_num;
						
						this.itemList.push(item);
					}
					
				});
				this.show=true;
			},
			fj(e) {
				
				if(e.w_num<1) return this.$Toast('该用户分货已完成');
				
				let item=JSON.parse(JSON.stringify(e));
			
				item.w_nums=item.w_num;
				this.itemList =[item];
				this.show = true;

			},
			toImg() {
				uni.previewImage({
					urls: [this.info.goods_img]
				})
			},
			async getInfo() {
				//this.params.token = uni.getStorageSync('fjToken');
				let {code,data}=await fhInfo(this.params);
				if (code == 1) {
					this.info = data.info;
					this.list = data.list;
					this.num=data.num;
					this.pl=data.pl;
				}
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	
	::v-deep {
		.u-navbar--fixed {
			background: linear-gradient(to bottom, #B9DDFF, #D7EAF3);
		}
	}
	
	.head {
		background: linear-gradient(to bottom, #B9DDFF, #D7EAF3);
	}
	
	.box {
		box-sizing: border-box;
		padding: 20rpx;
	}

	.list_info {
		box-sizing: border-box;
		padding: 20rpx;
		background-color: white;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.l_img {
		width: 140rpx;
		height: 140rpx;
		border-radius: 20rpx;
		vertical-align: bottom;
		margin-right: 10rpx;
	}

	.flex {
		display: flex;
	}

	.flexc {
		display: flex;
		align-items: center;
	}

	.flexcc {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flexcs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
	}

	.sku {
		font-size: 24rpx;
		color: #C1C1C1;
		margin-top: 20rpx;
		align-items: center;
	}

	.xian {
		width: 3rpx;
		height: 30rpx;
		background-color: #C1C1C1;
		margin: 0 20rpx;
	}

	.num_box {
		font-size: 26rpx;
		color: #C1C1C1;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

	}

	.mt {
		margin-top: 20rpx;
		width: 33.33%;
	}

	.num {
		font-size: 28rpx;
		color: black;
		margin-left: 10rpx;
	}

	.status {
		margin-left: auto;
		font-size: 26rpx;
	}

	.record_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: white;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
		margin-bottom: 20rpx;
	}

	.user_box {
		background-color: white;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx 20rpx 20rpx 20rpx;
	}

	.user_info {

		box-sizing: border-box;
		padding: 20rpx;
	}

	.u_info_color {
		background-color: #F3F3F3;
		border-radius: 20rpx;
	}

	.mtop {
		margin-top: 20rpx;
	}

	.key {
		color: #4B91D9;
		font-weight: bold;
		border: 2rpx solid #4B91D9;
		width: 50rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		border-radius: 10rpx;

	}

	.mr {
		margin-right: 15rpx;
	}

	.u_num_box {
		text-align: center;
	}

	.fw {
		font-weight: bold;
		margin-top: 10rpx;
	}

	.nums_box {
		text-align: center;
	}

	.btn_box {
		box-sizing: border-box;
		padding: 20rpx 20rpx 20rpx 20rpx;
		justify-content: space-between;
	}

	.f_btn {
		width: 48%;
		text-align: center;
		background-color: #13AE67;
		color: white;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 15rpx;
	}
	.blue{
		color:#65A3D3;
	}
	.pl{
		width: 120rpx;
		text-align: center;
		background-color: #13AE67;
		color: white;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
	}
	
</style>